<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript"></script>-->

    <script src="/build/js/vue.js"></script>
    <script src="/build/js/jquery.js"></script>

</head>
<body>
<style>
    .fade-enter-active, .fade-leave-active {
        transition: opacity 2s
    }

    .fade-enter, fade-leave-to {
        opacity: 0;
    }
</style>
<div id="test">


    <input type="radio" name="one" value="female" v-model="gender">female
    <input type="radio" name="one" value="male" v-model="gender">male

    <p>
        <select v-model="cities">
            <option value="saddsa">思考劳动法</option>
            <option value="saddsa">a</option>
            <option value="saddsa">思考dds劳动法</option>
            <option value="saddsa">思考asd劳动法</option>
        </select>
    </p>


    <input type="text" v-bind:value="gender">，
    <input type="text" v-bind:value="cities">

    <p>
    <div v-if="gender=='male'">fucking</div>
    </p>


    <ul>
        <li v-for="i in role" :key="i.id" :value="i.id">{{i.name}}</li>
        <span v-for="(i,s) in role">
            <input type="checkbox" :value="i.id">{{s}}---------{{i.name}}
        </span>
    </ul>
    <br>

    <select>
        <option v-for="i in role" :value="i.id">{{i.name}}</option>
    </select>
    <br>
    <br>

    <table>
        <tr>
            <td>id</td>
            <td>name</td>
        </tr>
        <tr v-for="i in role" :key="i.id">
            <td>{{i.id}}</td>
            <td>{{i.name}}</td>
        </tr>
    </table>


    <p>event bundle===================</p>
    <br>
    <button @click="test1()" value="button">click me</button>
    <button @click="test2($event)" value="button" name="fsdsd" mm="fududdu">click me</button>

    <p>listener===================</p>
    <input type="text" v-model="TestName">
    <input type="text" v-model="Test.TestNmm">
    <br>
    <span>{{titleErrorMsg}}</span><br>
    <br>
    <span>{{userNameEroMsg}}</span>
    <br>
    <span>{{initUserName}}</span>
    <p>filter===================</p>
    <p>{{haha|filter1|filter2}}</p>

    <p>animation and fade===================</p>
    <input type="button" v-on:click="show=!show" value="click me plz fuk">
    <transition name="fade" mode="">
        <div v-if="show">动画效果</div>
    </transition>

    <br>
    <br>
    <p>life cycle===================</p>


    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>


</div>

<script>
    $(function () {
        test1();
    })

    Vue.filter("filter2", function (val) {
        return val.replaceAll("u", "*");
    });


    new Vue({
        el: "#test",
        data: {
            show: true,
            haha: "fuckyou",
            gender: "male",
            cities: "",
            TestName: "sss",
            Test: {
                TestNmm: "aaa"
            },
            Test1: [
                {nnn: "ffffffffffff"}
            ],
            titleErrorMsg: "",
            userNameEroMsg: "",
            userNameEroMsg2: "",

            role: [
                {id: 1, name: "tom", age: 5},
                {id: 2, name: "jack", age: 3},
                {id: 3, name: "rose", age: 6},
                {id: 4, name: "pob", age: 6},
            ],
            people: {
                miss: "Ms.lolo",
                mister: "mr.klko"
            }


        },
        methods: {
            test1: function () {
                console.log("hello")
            },
            test2: function (a) {
                console.log(a.currentTarget.name);
                console.log(a.currentTarget.attributes.getNamedItem("mm").value);

            }
        },
        watch: {
            TestName: function (oldVal, newVal) {
                console.log(newVal);
                if (newVal.length > 10) {
                    this.titleErrorMsg = "title is too long";
                } else this.titleErrorMsg = null;
            },
            'Test.TestNmm': function (oldVal, newVal) {
                console.log(newVal);
                if (newVal.length > 10) {
                    this.userNameEroMsg = "user name is too long";
                } else this.userNameEroMsg = null;

            },
        },

        computed: {
            initUserName: function () {
                if (this.haha == "") {
                    return "";
                }
                return this.haha[0].toUpperCase() + this.haha.substr(1);

            }
        },
        filter: {
            filter1: function (val) {
                return val.replaceAll("u", "*");
            }
        },
        mounted() {
            this.test1();
        },
        created() {
            window.test1 = this.test1;
        }


    });


</script>

</body>
</html>